<template>
  <div>
    <div :style="{ height: height, width: width }" :id="id"></div>
  </div>
</template>
  <script>
import * as echarts from "echarts";
export default {
  name: "NodeView",
  props: {
    height: {
      type: String,
      default: "500px"
    },
    width: {
      type: String,
      default: "500px"
    },
    id: {
      type: String,
      default: "main"
    }
  },
  data() {
    return {
      queryParam: {
        nodeId: 5
      },
      graph:[],
    };
  },
  mounted() {
    this.initCharts();
    this.getGraphList();
  },
  methods: {
    getGraphList() {
      this.axios
        .post(`/firstNode/firstnode/getNodeGraph/` + this.queryParam.nodeId)
        .then(response => {
          this.graph = response
          console.log(response);
        });
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        legend: {
        data: ['Movie', 'Person']
      },
      series: [
        {
          type: 'graph',
          layout: 'force',
          animation: true,
          draggable: true,
          roam: true,
          selectedMode: true,
          lineStyle: {
            curveness: 0
          },
          emphasis: {
            focus: 'adjacency',
            lineStyle: {
              width: 5
            }
          },
          force: {
            repulsion: 50
          },
          nodes: this.graph.nodes,
          links: this.graph.links,
          categories: this.graph.categories
        }
      ]
    };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  background-color: #f0f3f2;
}
</style>